<!--<template>-->
<!--  <div class="server-center-layout">-->
<!--    &lt;!&ndash; 左侧栏 &ndash;&gt;-->
<!--    <div class="left-panel">-->
<!--      <div class="left-top">-->
<!--        <el-card class="box-card basic-info">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>设备列表</span>-->
<!--          </div>-->
<!--          <el-table :data="deviceList" border size="small" style="width: 100%">-->
<!--            <el-table-column prop="name" label="设备名称" width="80" />-->
<!--            <el-table-column prop="model" label="设备型号" width="90" />-->
<!--            <el-table-column prop="region" label="设备区域" width="100" />-->
<!--            <el-table-column prop="capacity" label="硬盘总容量" width="110" />-->
<!--            <el-table-column label="详情" width="60">-->
<!--              <template #default>-->
<!--                <el-link type="primary" :underline="false">详情</el-link>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </div>-->
<!--      <div class="left-bottom">-->
<!--        <el-card class="box-card warning-card">-->
<!--          <div slot="header">告警</div>-->
<!--          <div class="alarm-circles">-->
<!--            <el-row gutter="10">-->
<!--              <el-col :span="8" class="alarm-circle-item">-->
<!--                <el-progress type="circle" :percentage="100" :width="70" color="#f56c6c" />-->
<!--                <div class="alarm-label red">紧急 <span>1</span></div>-->
<!--                <div class="alarm-time">&gt;30分钟</div>-->
<!--              </el-col>-->
<!--              <el-col :span="8" class="alarm-circle-item">-->
<!--                <el-progress type="circle" :percentage="100" :width="70" color="#e6a23c" />-->
<!--                <div class="alarm-label yellow">重要 <span>1</span></div>-->
<!--                <div class="alarm-time">&gt;2小时</div>-->
<!--              </el-col>-->
<!--              <el-col :span="8" class="alarm-circle-item">-->
<!--                <el-progress type="circle" :percentage="100" :width="70" color="#909399" />-->
<!--                <div class="alarm-label gray">警告 <span>0</span></div>-->
<!--                <div class="alarm-time">&gt;48小时</div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--          <div class="alarm-list alarm-fixed-height">-->
<!--            <div class="alarm-item">-->
<!--              <el-icon color="#f56c6c" style="vertical-align: middle;"><i class="el-icon-warning"></i></el-icon>-->
<!--              <span class="alarm-content">端口（控制器CTE0，控制器A，端口号H0）协商速率100...</span>-->
<!--              <div class="alarm-date">2017-03-19 18:26:48 UTC+08:00</div>-->
<!--            </div>-->
<!--            <div class="alarm-item">-->
<!--              <el-icon color="#f56c6c" style="vertical-align: middle;"><i class="el-icon-warning"></i></el-icon>-->
<!--              <span class="alarm-content">系统无法监控控制器（控制器CTE0，控制器B）。</span>-->
<!--              <div class="alarm-date">2025-02-26 01:15:49 UTC+08:00</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 中间栏 &ndash;&gt;-->
<!--    <div class="center-panel">-->
<!--      <div class="center-top">-->
<!--        <el-card class="box-card capacity-card">-->
<!--          <div slot="header">容量</div>-->
<!--          <el-row class="capacity-main" gutter="10">-->
<!--            &lt;!&ndash; 左侧圆环和容量统计 &ndash;&gt;-->
<!--            <el-col :span="6" class="capacity-circle-col">-->
<!--              <div class="capacity-circle">-->
<!--                <el-progress type="circle" :percentage="0" width="90" />-->
<!--                <div class="capacity-desc">存储池汇总</div>-->
<!--                <div class="capacity-total">-->
<!--                  <div>总计 <span>{{ capacity.total }} GB</span></div>-->
<!--                  <div class="used">已使用 <span>{{ capacity.used }} KB</span></div>-->
<!--                  <div class="free">未使用 <span>{{ capacity.free }} GB</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            &lt;!&ndash; 中间空间节省和条形图 &ndash;&gt;-->
<!--            <el-col :span="12" class="capacity-saving-col">-->
<!--              <div class="saving-title">-->
<!--                空间节省-->
<!--                <el-checkbox v-model="saving.onlyLun" style="margin-left:10px;">仅包含启用重复数据删除/压缩的LUN</el-checkbox>-->
<!--              </div>-->
<!--              <div class="saving-ratio">-->
<!--                <span class="ratio-value">{{ saving.ratio }}</span>-->
<!--                <span class="ratio-label">数据缩减比</span>-->
<!--              </div>-->
<!--              <div class="saving-bar-area">-->
<!--                <div class="saving-bar-label">节省量</div>-->
<!--                <div class="saving-bar-bg">-->
<!--                  <div class="saving-bar" :style="{width: '80%'}"></div>-->
<!--                  <span class="saving-bar-value">10.367 MB</span>-->
<!--                </div>-->
<!--                <div class="saving-bar-label">节省量</div>-->
<!--                <div class="saving-bar-bg gray">-->
<!--                  <div class="saving-bar gray" :style="{width: '60%'}"></div>-->
<!--                  <span class="saving-bar-value">-9.734 MB</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="saving-detail">-->
<!--                <div>节省量：-293.000 KB</div>-->
<!--                <div>节省量：355.000 KB</div>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            &lt;!&ndash; 右侧节省比率 &ndash;&gt;-->
<!--            <el-col :span="6" class="capacity-right-col">-->
<!--              <div class="thin-saving">thin空间节省<br><span class="thin-value">99.8%</span></div>-->
<!--              <div class="total-saving">总共空间节省比率<br><span class="total-value">≥2990.4:1</span></div>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-card>-->
<!--      </div>-->
<!--      <div class="center-bottom">-->
<!--        <el-card class="box-card performance-card">-->
<!--          <div slot="header" class="performance-header">-->
<!--            <span>性能</span>-->
<!--            <div class="performance-select">-->
<!--              <span class="unit">单位：MB/s</span>-->
<!--              <el-select v-model="performanceType" size="small" style="width: 100px; margin-left: 10px;">-->
<!--                <el-option label="块带宽" value="block" />-->
<!--                <el-option label="对象带宽" value="object" />-->
<!--              </el-select>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div id="performance-chart" style="height:220px;width:100%"></div>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 右侧栏 &ndash;&gt;-->
<!--    <div class="right-panel">-->
<!--      <el-menu class="side-menu" default-active="1">-->
<!--        <el-menu-item index="1"><i class="el-icon-s-home"></i> 首页</el-menu-item>-->
<!--        <el-menu-item index="2"><i class="el-icon-setting"></i> 系统</el-menu-item>-->
<!--        <el-menu-item index="3"><i class="el-icon-s-platform"></i> 资源分布</el-menu-item>-->
<!--        <el-menu-item index="4"><i class="el-icon-s-data"></i> 数据服务</el-menu-item>-->
<!--        <el-menu-item index="5"><i class="el-icon-view"></i> 监控</el-menu-item>-->
<!--        <el-menu-item index="6"><i class="el-icon-s-tools"></i> 设置</el-menu-item>-->
<!--        <el-menu-item index="7"><i class="el-icon-s-help"></i> 技术支持</el-menu-item>-->
<!--      </el-menu>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted, onBeforeUnmount, watch } from 'vue'-->
<!--import * as echarts from 'echarts'-->

<!--const deviceList = ref([-->
<!--  { name: '设备A', model: '2288V', region: '上海101', capacity: '295.465GB' },-->
<!--  { name: '设备B', model: '2266V', region: '北京202', capacity: '336.467GB' },-->
<!--  { name: '设备C', model: '5288V', region: '广州303', capacity: '512.000GB' },-->
<!--  { name: '设备D', model: '2288H', region: '深圳404', capacity: '256.789GB' },-->
<!--  { name: '设备E', model: '2299V', region: '成都505', capacity: '128.123GB' },-->
<!--  { name: '设备F', model: '2288X', region: '重庆606', capacity: '1024.000GB' },-->
<!--  { name: '设备G', model: '2266H', region: '杭州707', capacity: '768.888GB' },-->
<!--  { name: '设备H', model: '5288H', region: '南京808', capacity: '640.555GB' }-->
<!--])-->

<!--const capacity = ref({-->
<!--  total: 129.057,-->
<!--  used: 0,-->
<!--  free: 129.057-->
<!--})-->

<!--const saving = ref({-->
<!--  ratio: '29.904:1',-->
<!--  thin: 99.8,-->
<!--  total: '≥2990.4:1',-->
<!--  onlyLun: false-->
<!--})-->

<!--// 性能数据-->
<!--const performanceType = ref('block')-->
<!--const performanceData = ref(Array(10).fill(0))-->
<!--const performanceLabels = ref([])-->
<!--let timer = null-->

<!--function getNowTimeStr() {-->
<!--  const d = new Date()-->
<!--  return d.getHours().toString().padStart(2, '0') + ':' +-->
<!--    d.getMinutes().toString().padStart(2, '0') + ':' +-->
<!--    d.getSeconds().toString().padStart(2, '0')-->
<!--}-->

<!--function updatePerformanceData() {-->
<!--  // 随机生成0~1之间的数据-->
<!--  performanceData.value.push((Math.random() * 1).toFixed(2))-->
<!--  if (performanceData.value.length > 10) performanceData.value.shift()-->
<!--  performanceLabels.value.push(getNowTimeStr())-->
<!--  if (performanceLabels.value.length > 10) performanceLabels.value.shift()-->
<!--}-->

<!--let chart = null-->
<!--function renderChart() {-->
<!--  if (!chart) {-->
<!--    chart = echarts.init(document.getElementById('performance-chart'))-->
<!--  }-->
<!--  chart.setOption({-->
<!--    grid: { left: 40, right: 20, top: 30, bottom: 30 },-->
<!--    xAxis: {-->
<!--      type: 'category',-->
<!--      data: performanceLabels.value,-->
<!--      axisLabel: { color: '#909399' }-->
<!--    },-->
<!--    yAxis: {-->
<!--      type: 'value',-->
<!--      min: 0,-->
<!--      max: 1,-->
<!--      splitNumber: 5,-->
<!--      axisLabel: { color: '#909399' }-->
<!--    },-->
<!--    series: [{-->
<!--      data: performanceData.value,-->
<!--      type: 'line',-->
<!--      smooth: true,-->
<!--      symbol: 'circle',-->
<!--      showSymbol: false,-->
<!--      lineStyle: { color: '#409EFF', width: 2 },-->
<!--      areaStyle: { color: 'rgba(64,158,255,0.1)' }-->
<!--    }]-->
<!--  })-->
<!--}-->

<!--onMounted(() => {-->
<!--  // 初始化时间和数据-->
<!--  for (let i = 0; i < 10; i++) {-->
<!--    performanceLabels.value.push('&#45;&#45;:&#45;&#45;:&#45;&#45;')-->
<!--  }-->
<!--  updatePerformanceData()-->
<!--  renderChart()-->
<!--  timer = setInterval(() => {-->
<!--    updatePerformanceData()-->
<!--    renderChart()-->
<!--  }, 1000)-->
<!--})-->

<!--onBeforeUnmount(() => {-->
<!--  if (timer) clearInterval(timer)-->
<!--  if (chart) chart.dispose()-->
<!--})-->

<!--watch(performanceType, () => {-->
<!--  // 切换类型时可切换数据，这里仅刷新-->
<!--  renderChart()-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--.server-center-layout {-->
<!--  display: flex;-->
<!--  height: 100vh;-->
<!--  background: #f5f7fa;-->
<!--}-->
<!--.left-panel, .center-panel {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 100%;-->
<!--  gap: 20px;-->
<!--}-->
<!--.left-panel {-->
<!--  width: 380px;-->
<!--  min-width: 320px;-->
<!--  max-width: 420px;-->
<!--  flex: 3 0 0;-->
<!--  padding: 20px 10px 20px 20px;-->
<!--  box-sizing: border-box;-->
<!--}-->
<!--.center-panel {-->
<!--  flex: 4 0 0;-->
<!--  min-width: 350px;-->
<!--  max-width: 900px;-->
<!--  padding: 20px 10px;-->
<!--  box-sizing: border-box;-->
<!--}-->
<!--.left-top, .center-top {-->
<!--  flex: 1;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  min-height: 0;-->
<!--}-->
<!--.left-bottom, .center-bottom {-->
<!--  flex: 1;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  min-height: 0;-->
<!--}-->
<!--.basic-info .el-table {-->
<!--  flex: 1 1 0;-->
<!--  min-height: 0;-->
<!--  overflow-y: auto;-->
<!--  font-size: 13px;-->
<!--}-->
<!--.right-panel {-->
<!--  width: 140px;-->
<!--  min-width: 120px;-->
<!--  max-width: 180px;-->
<!--  flex: 1 0 0;-->
<!--  background: #fff;-->
<!--  border-left: 1px solid #ebeef5;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  padding: 20px 0;-->
<!--  height: 100%;-->
<!--  box-sizing: border-box;-->
<!--}-->
<!--.left-flex-item {-->
<!--  flex: 1 1 0;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  min-height: 0;-->
<!--}-->
<!--.center-flex-item {-->
<!--  flex: 1 1 0;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  min-height: 0;-->
<!--}-->
<!--.basic-info.left-flex-item {-->
<!--  margin-bottom: 20px;-->
<!--  flex: 2 1 0;-->
<!--  min-height: 0;-->
<!--  /* 增大最大高度，提升可见行数 */-->
<!--  max-height: 65vh;-->
<!--}-->
<!--.warning-card.left-flex-item {-->
<!--  flex: 1 1 0;-->
<!--  min-height: 0;-->
<!--  margin-top: 0;-->
<!--}-->
<!--.alarm-fixed-height {-->
<!--  flex: 1 1 0;-->
<!--  min-height: 0;-->
<!--  height: auto;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->
<!--.alarm-list-scroll {-->
<!--  overflow-y: auto;-->
<!--  max-height: 110px;-->
<!--}-->
<!--.basic-info .el-table__row {-->
<!--  height: 32px !important; /* 更紧凑的行高 */-->
<!--}-->
<!--.box-card {-->
<!--  margin-bottom: 0;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 100%;-->
<!--}-->
<!--.status-text {-->
<!--  margin-left: 10px;-->
<!--}-->
<!--.warning-count {-->
<!--  font-size: 24px;-->
<!--  font-weight: bold;-->
<!--  text-align: center;-->
<!--}-->
<!--.red { color: #f56c6c; }-->
<!--.yellow { color: #e6a23c; }-->
<!--.gray { color: #909399; }-->
<!--.warning-summary {-->
<!--  margin-bottom: 10px;-->
<!--}-->
<!--.saving-info {-->
<!--  margin-top: 10px;-->
<!--  color: #606266;-->
<!--  font-size: 14px;-->
<!--}-->
<!--/* 容量卡片样式 */-->
<!--.capacity-main {-->
<!--  align-items: stretch;-->
<!--}-->
<!--.capacity-circle-col {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--}-->
<!--.capacity-circle {-->
<!--  text-align: center;-->
<!--}-->
<!--.capacity-desc {-->
<!--  margin-top: 10px;-->
<!--  color: #909399;-->
<!--  font-size: 14px;-->
<!--}-->
<!--.capacity-total {-->
<!--  margin-top: 10px;-->
<!--  font-size: 13px;-->
<!--  color: #606266;-->
<!--}-->
<!--.capacity-total .used {-->
<!--  color: #409EFF;-->
<!--}-->
<!--.capacity-total .free {-->
<!--  color: #67C23A;-->
<!--}-->
<!--.capacity-saving-col {-->
<!--  padding: 0 10px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: center;-->
<!--}-->
<!--.saving-title {-->
<!--  font-size: 15px;-->
<!--  font-weight: bold;-->
<!--  margin-bottom: 5px;-->
<!--}-->
<!--.saving-ratio {-->
<!--  margin: 10px 0 10px 0;-->
<!--  display: flex;-->
<!--  align-items: baseline;-->
<!--}-->
<!--.ratio-value {-->
<!--  font-size: 28px;-->
<!--  color: #409EFF;-->
<!--  font-weight: bold;-->
<!--  margin-right: 10px;-->
<!--}-->
<!--.ratio-label {-->
<!--  color: #909399;-->
<!--  font-size: 14px;-->
<!--}-->
<!--.saving-bar-area {-->
<!--  margin-bottom: 10px;-->
<!--}-->
<!--.saving-bar-label {-->
<!--  font-size: 13px;-->
<!--  color: #606266;-->
<!--  margin-top: 8px;-->
<!--}-->
<!--.saving-bar-bg {-->
<!--  background: #f0f2f5;-->
<!--  border-radius: 4px;-->
<!--  height: 18px;-->
<!--  position: relative;-->
<!--  margin: 4px 0 4px 0;-->
<!--  width: 90%;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->
<!--.saving-bar {-->
<!--  background: #409EFF;-->
<!--  height: 100%;-->
<!--  border-radius: 4px 0 0 4px;-->
<!--}-->
<!--.saving-bar.gray {-->
<!--  background: #909399;-->
<!--}-->
<!--.saving-bar-value {-->
<!--  position: absolute;-->
<!--  right: 8px;-->
<!--  color: #303133;-->
<!--  font-size: 12px;-->
<!--}-->
<!--.saving-detail {-->
<!--  font-size: 13px;-->
<!--  color: #606266;-->
<!--  margin-top: 8px;-->
<!--}-->
<!--.capacity-right-col {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: center;-->
<!--  align-items: flex-start;-->
<!--  padding-left: 10px;-->
<!--  font-size: 15px;-->
<!--}-->
<!--.thin-saving {-->
<!--  margin-bottom: 20px;-->
<!--  color: #909399;-->
<!--}-->
<!--.thin-value {-->
<!--  color: #409EFF;-->
<!--  font-size: 20px;-->
<!--  font-weight: bold;-->
<!--}-->
<!--.total-saving {-->
<!--  color: #909399;-->
<!--}-->
<!--.total-value {-->
<!--  color: #409EFF;-->
<!--  font-size: 18px;-->
<!--  font-weight: bold;-->
<!--}-->
<!--/* 告警卡片样式 */-->
<!--.alarm-circles {-->
<!--  margin-bottom: 10px;-->
<!--}-->
<!--.alarm-circle-item {-->
<!--  text-align: center;-->
<!--}-->
<!--.alarm-label {-->
<!--  font-size: 15px;-->
<!--  margin-top: 5px;-->
<!--}-->
<!--.alarm-label span {-->
<!--  font-weight: bold;-->
<!--  font-size: 16px;-->
<!--}-->
<!--.alarm-time {-->
<!--  color: #909399;-->
<!--  font-size: 13px;-->
<!--  margin-top: 2px;-->
<!--}-->
<!--.alarm-list {-->
<!--  margin-top: 10px;-->
<!--}-->
<!--.alarm-item {-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--  margin-bottom: 8px;-->
<!--  font-size: 13px;-->
<!--  color: #606266;-->
<!--}-->
<!--.alarm-content {-->
<!--  margin-left: 6px;-->
<!--  flex: 1;-->
<!--}-->
<!--.alarm-date {-->
<!--  color: #909399;-->
<!--  font-size: 12px;-->
<!--  margin-left: 6px;-->
<!--  white-space: nowrap;-->
<!--}-->
<!--.performance-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->
<!--.performance-select {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->
<!--.unit {-->
<!--  color: #909399;-->
<!--  font-size: 13px;-->
<!--}-->
<!--</style>-->
<template>
  <div class="Server-container">
    <img src="@/assets/image2.png" alt="服务图片" class="Server-image">
  </div>
</template>

<script>
export default {
  name: 'Capacity'
}
</script>

<style scoped>
  .Server-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* 或 400px，根据实际页面调整 */
    width: 100%;
    box-sizing: border-box;
    padding: 40px 0; /* 上下留白，视觉更舒适 */
  }

  .Server-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 可选：让图片更美观 */
    box-shadow: 0 2px 16px rgba(0,0,0,0.08); /* 可选：轻微阴影 */
  }
</style>